<template>
  <div class="hm-post">
    <!-- 视频 -->
    <div class="video-post" v-if="post.type == 2">
      <div class="title line1">
        {{ post.title }}
      </div>
      <div class="video">
        <img :src="post.cover[0].url" alt="" />
        <div class="play">
          <i class="iconfont iconshipin"></i>
        </div>
      </div>
      <div class="bottom">
        <span>{{ post.user.nickname }}</span>
        <span>{{ post.comments.length }} 跟帖</span>
      </div>
    </div>
    <!-- 单个图片 -->
    <div class="single-img-post" v-else-if="post.cover.length < 3">
      <div class="left">
        <div class="title line2">
          {{ post.title }}
        </div>
        <div class="bottom">
          <span>{{ post.user.nickname }}</span>
          <span>{{ post.comments.length }} 跟帖</span>
        </div>
      </div>
      <div class="right">
        <img :src="post.cover[0].url" alt="" />
      </div>
    </div>

    <!-- 三个图片 -->
    <div class="multi-img-post" v-else>
      <div class="title line1">
        {{ post.title }}
      </div>
      <div class="imgs">
        <img :src="post.cover[0].url | fixurl" alt="" />
        <img :src="post.cover[1].url | fixurl" alt="" />
        <img :src="post.cover[2].url | fixurl" alt="" />
      </div>
      <div class="bottom">
        <span>{{ post.user.nickname }}</span>
        <span>{{ post.comments.length }} 跟帖</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["post"],
  methods: {
    fixedUrl(url) {
      if (url.startsWith("http")) {
        return url;
      } else {
        return this.$axios.defaults.baseURL + url;
      }
    }
  }
};
</script>

<style scoped lang="less">
.title {
  // height: 25px;
  line-height: 20px;
}
.bottom {
  color: #999;
  span {
    margin-right: 20px;
  }
}

.single-img-post {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #000;

  .left {
    flex: 1;
    // background: pink;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 10px;
  }
  .right {
    img {
      width: 115px;
      height: 75px;
      object-fit: cover;
    }
  }
}

.multi-img-post {
  padding: 10px;
  border-bottom: 1px solid #000;
  .imgs {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    // background: pink;
    img {
      width: 110px;
      height: 75px;
      object-fit: cover;
    }
  }
}

.video-post {
  padding: 10px;
  border-bottom: 1px solid #000;

  .video {
    text-align: center;
    position: relative;
    padding: 5px 0;
    img {
      width: 340px;
      height: 170px;
      object-fit: cover;
    }
    .play {
      width: 60px;
      height: 60px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .iconfont {
        line-height: 60px;
        text-align: center;
        color: #fff;
        font-size: 34px;
      }
    }
  }
}
</style>
